<template>
  <q-layout
    id="window"
    class="dyh fullscreen overflow-hidden "
    :class="useClassStore().mainLayoutClass"
    view="hHh lpR fFf"
  >
    <q-header
      class="text-black bg-transparent overflow-hidden"
      height-hint="58"
    >

      <div class="absolute" style="height: 180px; width: 200px; z-index: 0" />
      <div
        class="glass-50 absolute full-height full-width"
        style="z-index: 1"
      />
      <q-bar class="drag bg-white rounded-borders q-pa-none">

        <q-btn
          no-caps
          class="no-drag text-caption q-px-xs z-index-2"
          size="10px"
          color="deep-orange"
          flat
        >
          <div
            class="row items-center justify-center no-wrap q-mx-xs q-gutter-xs"
          >
            <img
              alt=""
              src="../../public/logo.png"
              style="width: 18px; height: 18px"
            />
            <div
              v-if="$q.screen.gt.xs"
              class="text-weight-bolder bg-clip-text bg-red-love dyh"
              style="font-size: 14px"
            >
              {{ useConfigStore().config.projectName || $t('appName') }}
            </div>
          </div>

        </q-btn>
        <q-btn
          aria-label="Menu"
          class="no-drag z-index-2 text-black"
          dense
          flat
          icon="menu"
          @click="toggleLeftDrawer"
        />

        <q-space />

        <!--        <div class="YL__toolbar-input-container no-drag row no-wrap">-->
        <!--          <q-input v-model="search" class="bg-white col" dense outlined placeholder="Search" square/>-->
        <!--          <q-btn class="YL__toolbar-input-btn" color="grey-3" icon="search" text-color="grey-8" unelevated/>-->
        <!--        </div>-->

        <q-space />

        <div
          class="q-gutter-sm q-mr-xs row items-center z-index-2 no-drag no-wrap"
        >
          <q-btn-dropdown
            v-model="btnMenu"
            dense
            class="q-pl-md"
            dropdown-icon="img:../public/logo.png"
            size="11px"
            flat
            :label="useUserStore()?.user?.username||''"
          >
            <template v-slot:label>
              <q-tooltip anchor="center left"> {{ useSocketStore().status.msg }} </q-tooltip>
              <q-badge
                rounded
                style="
                  width: 4px;
                  min-height: 8px;
                  min-width: 8px;
                  padding: 4px;
                  top: 8px;
                  left: 4px;
                "
                class="absolute-top-left"
                :color="useSocketStore().status.color"
              >
              </q-badge>
            </template>
            <q-list dense>
              <q-item-label header> 个人信息</q-item-label>
              <q-item to="login" v-close-popup clickable dense tabindex="0">
                <q-item-section>
                  <q-item-label>{{$t('logout')}}</q-item-label>
                  <q-item-label caption>{{$t('toLogin')}}回到登录页</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-icon name="login" />
                </q-item-section>
              </q-item>
              <q-separator inset spaced />
              <q-item-label header> {{$t('equipment')}}</q-item-label>
              <q-item
                v-for="i in useUserStore().userOnline"
                :key="i.client"
                v-close-popup
                clickable
                dense
                tabindex="0"
              >
                <q-item-section>
                  <q-item-label>{{ i.id }} {{ i.client }}</q-item-label>
                  <q-item-label caption>{{$t('online')}}</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-badge
                    rounded
                    style="
                  width: 4px;
                  min-height: 8px;
                  min-width: 8px;
                  padding: 4px;
                  top: 8px;
                  left: 4px;
                "
                    class="absolute-top-left"
                    :color="useSocketStore().status.color"
                  />
                  <q-icon name="login" />
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </div>

        <q-btn
          v-if="$q.screen.gt.xs"
          class="no-drag z-index-2"
          dense
          size="11px"
          flat
          icon="minimize"
          @click="minimize"
        />
        <q-btn
          v-if="$q.screen.gt.xs"
          :icon="isMaximized ? 'fullscreen_exit' : 'fullscreen'"
          class="no-drag z-index-2"
          dense
          size="11px"
          flat
          @click="toggleMaximize"
        />
        <q-btn
          v-if="$q.screen.gt.xs"
          class="no-drag q-mx-xs bg-red-love text-white z-index-9999"
          dense
          icon="close"
          @click="closeApp"
        />
      </q-bar>
      <q-separator
        style="width: 20px"
        class="animation absolute-top bg-gradation-circle-248px-at-center-16d9e3-30c7ec-46aef7"
      />
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      width="190"
      class="rounded-borders q-pl-xs q-py-xs"
      show-if-above
    >
      <q-scroll-area style="z-index: 2" class="fit rounded-borders">
        <div
          class="glass-50 absolute full-height full-width"
          style="z-index: 1"
        />
        <div
          class="glass-10-f absolute full-height full-width"
          style="z-index: 1"
        />
        <div
          class="absolute bg-gradation-to-top-9890e3-b1f4cf"
          style="
            height: 60px;
            width: 60px;
            border-radius: 50%;
            z-index: 0;
            top: 50px;
            left: 20px;
          "
        />
        <div
          class="absolute bg-gradation-to-top-accbee-e7f0fd"
          style="
            height: 160px;
            width: 160px;
            border-radius: 50%;
            z-index: 0;
            bottom: 90px;
            right: 40px;
          "
        />
        <!--        </div>-->

        <q-list class="rounded-borders q-gutter-y-xs" padding>

          <q-item
            to="/index"
            v-ripple
            :active="link === '/index'"
            active-class="bg-gradation-120deg-a6c0fe-f68084 text-white"
            class="rounded-borders q-mx-xs z-index-2"
            clickable
            dense
          >
            <q-item-section avatar>
              <q-icon name="home" />
            </q-item-section>
            <q-item-section class="">{{$t('genPage')}}</q-item-section>
          </q-item>

          <q-item
            to="/database"
            v-ripple
            :active="link === '/database'"
            active-class="bg-gradation-120deg-a6c0fe-f68084 text-white"
            class="rounded-borders q-mx-xs z-index-2"
            clickable
            dense
          >
            <q-item-section avatar>
              <q-icon name="storage" />
            </q-item-section>
            <q-item-section class="">{{$t('dbPage')}}</q-item-section>
          </q-item>
          <q-item
            to="/view"
            v-ripple
            :active="link === '/view'"
            active-class="bg-gradation-120deg-a6c0fe-f68084 text-white"
            class="rounded-borders q-mx-xs z-index-2"
            clickable
            dense
          >
            <q-item-section avatar>
              <q-icon name="view_list" />
            </q-item-section>
            <q-item-section class="">{{$t('viewPage')}}</q-item-section>
          </q-item>
<!--          <q-item-->
<!--            to="/template"-->
<!--            v-ripple-->
<!--            :active="link === '/template'"-->
<!--            active-class="bg-gradation-120deg-a6c0fe-f68084 text-white"-->
<!--            class="rounded-borders q-mx-xs z-index-2"-->
<!--            clickable-->
<!--            dense-->
<!--          >-->
<!--            <q-item-section avatar>-->
<!--              <q-icon name="dynamic_form" />-->
<!--            </q-item-section>-->
<!--            <q-item-section class="">{{$t('templatePage')}}</q-item-section>-->
<!--          </q-item>-->
          <q-item
            to="/api"
            v-ripple
            :active="link === '/api'"
            active-class="bg-gradation-120deg-a6c0fe-f68084 text-white"
            class="rounded-borders q-mx-xs z-index-2"
            clickable
            dense
          >
            <q-item-section avatar>
              <q-icon name="api" />
            </q-item-section>
            <q-item-section class="">
              api
<!--              {{$t('api')}}-->
            </q-item-section>
          </q-item>
          <q-item
            to="/config"
            v-ripple
            :active="link === '/config'"
            active-class="bg-gradation-120deg-a6c0fe-f68084 text-white"
            class="rounded-borders q-mx-xs z-index-2"
            clickable
            dense
          >
            <q-item-section avatar>
              <q-icon name="settings" />
            </q-item-section>
            <q-item-section class="">{{$t('configPage')}}</q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <router-view ref="routerChildPage" class="rounded-borders q-pt-xs" />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts" setup>
import { inject, onMounted, Ref, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { getMineTemplate } from 'src/api/api';
import { useConfigStore }  from 'stores/configStore';
import { useUserStore }    from '../stores/userStore';
import { LocalStorage } from 'quasar';
import { useSocketStore } from 'stores/useSocket';
import { useClassStore }                      from 'stores/useClass';

const bus = inject('bus');

const router = useRouter();
const leftDrawerOpen = ref(false);
const link = ref('/index');
const btnMenu = ref(false);
const socket: Ref<WebSocket | null> = ref(null);
// const connect = () => {
//   socket.value = new WebSocket(
//     'ws://localhost:8080/portal/open/websocket/1/pc'
//   );
//   socket.value.onopen = () => {
//     console.log('连接成功');
//   };
//   socket.value.onclose = () => {
//     console.log('连接已关闭');
//   };
//   socket.value.onmessage = async (event) => {
//     const message = event.data;
//     console.log('收到消息：' + message);
//     let res = JSON.parse(message) as { code: number; msg: number };
//     bus.emit('socketMsg', message);
//     console.log(JSON.parse(message));
//     if (res.code === 1) {
//       console.log((await getMineTemplate()).data.data);
//     }
//   };
// };
const routerChildPage = ref();
const socketMsg = ref('');
const send = () => {
  if (socket.value) socket.value.send(socketMsg.value);
};

const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value;
};

const minimize = () => {
  window.ipcCom.minimize();
};

const toggleMaximize = () => {
  window.ipcCom.toggleMaximize();
  console.log(isMaximized.value);
  isMaximized.value = window.ipcCom.isMaximized();
};
const isMaximized = ref(false);
const closeApp = () => {
  window.ipcCom.close();
};
onMounted(() => {
  useSocketStore().initSocket(useUserStore()?.user?.id||0);
  router.beforeEach(async (to, from, next) => {
    link.value = to.path
    next()
  })
  // setInterval(() => {
  //   if (socket.value?.readyState !== 1) {
  //     socket.value = null;
  //     console.log('短线重连中...');
  //     connect();
  //   }
  // }, 2000);
});
</script>
<style lang="sass">
.q-drawer--left
  border-radius: 4px
  background-color: transparent
</style>
<style></style>
